<template>
  <div id="body-box">
    <img id="webp" :key="form.key" :src="this.form.webpUrl" class="full-screen-cele" height="1080" width="1920"/>
    <div :key="'darkScene' + form.key" :style="{backgroundColor: this.darkSceneColorCss}" class="darkScene"></div>
    <img :key="'avatar' + form.key" :guard_level="form.guard_level" :src="form.avatarUrl" class="avatar"/>
    <div :key="'uname' + form.key" :guard_level="form.guard_level" class="uname">{{ form.uname }}</div>
    <div :class="'custom-words-'+cssStatus">{{ customWords }}</div>
  </div>
</template>

<script>
import ChatClientDirect from "@/api/chat/ChatClientDirect";
import ChatClientTest from "@/api/chat/ChatClientTest";
// import {set} from "lodash";


export default {
  name: "Cele",
  props: {
    strConfig: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chatClient: null,
      waitList: [],
      minDanmakuInterval: 100,
      maxDanmakuInterval: 500,
      showCele: false,
      queue: [],
      busy: false,
      queueIndex: 0,
      captainType1WebpUrl: '',
      captainType2WebpUrl: '',
      captainType3WebpUrl: '',
      webpTimeLong: 0,
      customWords: '',
      form: {
        uname: '上舰特效加载成功',
        avatarUrl: 'https://i1.xuehusang.cn/openlivechat-css/image/blc-logo.png',
        key: 0,
        webpUrl: '',
        guard_level: 3
      },
      cssStatus: '',
      skinList: {
        default: 'https://i1.xuehusang.cn/openlivechat-css/fullScreenCele/default_skin.css'
      },
      darkSceneColorCss: 'rgba(0,0,0,0.1)',
      userData: null,
      delayTime: 0
    }
  },
  mounted() {
    this.init()
    this.initChatClient()
    this.queueLoop()
  },
  beforeDestroy() {
    if (this.chatClient) {
      this.chatClient.stop()
    }
  },
  methods: {
    init() {
      this.darkSceneColorCss = `rgba(0,0,0,${this.$route.query.MaskOpacity / 100}`
      this.delayTime = (this.$route.query.DelayTime === undefined) ? 0 : this.$route.query.DelayTime * 1000
      this.user_data = {
        "code": this.$route.query.Code,
        "mid": this.$route.query.Mid,
        "timestamp": this.$route.query.Timestamp,
        "sign": this.$route.query.CodeSign
      }
    },
    getRootClass() {
      const rootStyle = window.getComputedStyle(document.documentElement);
      this.webpTimeLong = rootStyle.getPropertyValue('--root-webp-time');
      this.captainType1WebpUrl = this.extractContentFromText(rootStyle.getPropertyValue('--root-webp-captain-type-1-url'));
      this.captainType2WebpUrl = this.extractContentFromText(rootStyle.getPropertyValue('--root-webp-captain-type-2-url'));
      this.captainType3WebpUrl = this.extractContentFromText(rootStyle.getPropertyValue('--root-webp-captain-type-3-url'));
      this.customWords = this.extractContentFromText(rootStyle.getPropertyValue('--root-custom-words-1'));
    },
    initChatClient() {
      if (this.$route.query.Code === undefined) {
        this.chatClient = new ChatClientTest(this.minDanmakuInterval, this.maxDanmakuInterval)
      } else {
        this.chatClient = new ChatClientDirect(this.user_data.code, this.user_data.sign, this.user_data.timestamp, this.user_data.mid)
      }
      this.chatClient.onAddText = this.onAddText
      this.chatClient.onAddGift = this.onAddGift
      this.chatClient.onAddMember = this.onAddMember
      this.chatClient.onAddSuperChat = this.onAddSuperChat
      this.chatClient.onPaidSkinList = this.onAddPaidSkinList
      // this.chatClient.onDelSuperChat = this.onDelSuperChat
      // this.chatClient.onUpdateTranslation = this.onUpdateTranslation
      this.chatClient.start()
      setTimeout(this.checkInitStatus, 3000)
    },
    onAddText() {

    },
    onAddGift() {

    },
    onAddSuperChat() {

    },
    onAddMember(data) {
      let price = data.privilegeType == 3 ? 198 : data.privilegeType == 2 ? 1998 : 19998
      let message = {
        id: data.id,
        avatarUrl: data.avatarUrl,
        time: new Date(data.timestamp * 1000),
        authorName: data.authorName,
        privilegeType: data.privilegeType,
        title: data.authorName,
        price: price
      }
      const tmp = [message.avatarUrl, message.authorName, message.privilegeType]
      // console.log('新增舰长：' + message.authorName + '，舰长类型：' + message.privilegeType)
      this.queue.push(tmp)
    },
    onAddPaidSkinList(data) {
      this.paidSkinList = data
    },
    start() {
      this.chatClient.start()
    },
    stop() {
      this.chatClient.stop()
    },
    checkInitStatus() {
      if (this.chatClient.status === false) {
        this.$message.error({
          message: '连接B站弹幕服务器失败',
          duration: '0'
        })
      } else {
        this.applySkin(this.$route.query.skin)
        if (this.$route.query.Code === undefined) {
          this.$message({
            message: '连接弹幕服务器成功',
            duration: '500'
          })
        } else {
        }
      }
    },
    applySkin(skinName) {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = this.skinList[skinName];
      document.head.appendChild(link);
      setTimeout(() => {
        this.getRootClass()
      }, 3000)
    },
    //添加元素并调起倒计时
    addRow(avatar, uname, captain_type) {
      this.busy = true;
      var background_url = ''
      //识别舰长类型调参
      if (captain_type == 3) {
        background_url = this.captainType3WebpUrl
      } else if (captain_type == 2) {
        background_url = this.captainType2WebpUrl
      } else {
        background_url = this.captainType1WebpUrl
      }
      setTimeout(() => {
        const webpItem = document.getElementById('webp')
        webpItem.src = background_url
        this.$nextTick(() => {
          this.form = {
            uname: uname,
            avatarUrl: avatar,
            key: this.form.key + 1,
            webpUrl: background_url,
            guard_level: captain_type
          }
        })
        this.cssStatus = (this.queueIndex % 2 === 0) ? 'a' : 'b'
        setTimeout(() => {
          this.busy = false;
        }, this.webpTimeLong * 1000);
      }, this.delayTime)
    },
    queueDetect() {
      if (this.busy == false) {
        //如果队列空闲
        if (this.queue.length > this.queueIndex) {
          this.addRow(this.queue[this.queueIndex][0], this.queue[this.queueIndex][1], this.queue[this.queueIndex][2])
          this.queueIndex = this.queueIndex + 1;
          // console.log('增加任务')
        } else {
          // console.log('队列空置')
        }
      } else {
        // console.log('队列繁忙')
      }
    },
    queueLoop() {
      setInterval(this.queueDetect, 500)
    },
    extractContentFromText(text) {
      const regex = /["']([^"']+)["']/;
      const match = text.match(regex);
      if (match) {
        return match[1];
      } else {
        return '未找到匹配内容';
      }
    }
  },
  components: {}
}
</script>

<style>

#body-box {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}


body {
  background-color: transparent !important;
}
</style>